<template>
    <div class="app-container">
        <el-form class="m-6 mt-2 form" ref="ruleFormRef" :model="ruleForm" :rules="rules" style="min-width: 600px;flex-wrap: wrap;justify-content: flex-start;" label-width="auto" :size="formSize" status-icon>
            <el-form-item class="ml-10" v-for="(item,index) in ruleForm" :key="index" :label="item.title+':'">
                <el-switch v-model="item.is_enable" :inactive-value="0" :active-value="1" style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"/>
                <el-checkbox v-if="item.is_enable" class="ml-8" v-model="item.is_open" :true-value="1" :false-value="0" label="是否不可取消" />
                <div v-if="item.is_enable">
                    <div v-if="isLzyh(item.title)" class="flex gap-4 mt-4 mb-4">
                        <span>立减金额</span>
                        <el-input
                            v-model="money" type="number"
                            style="max-width: 180px"
                            placeholder="请输入立减金额">
                            <template #append>元</template>
                        </el-input>
                    </div>
                    <div class="flex gap-4 mt-4">
                        <span>规则说明</span>
                        <el-input
                            v-model="item.rule"
                            maxlength="200"
                            style="width: 360px"
                            :autosize="{ minRows: 3}"
                            placeholder="请输入规则说明"
                            show-word-limit
                            type="textarea"
                        />
                    </div>
                    <div v-if="isMysy(item.title)" class="mt-2 ml-18" style="color: #837e7e;">购买方案后将赠送同价代金券，<el-input
                            v-model="expire"
                            style="max-width: 60px"
                            placeholder="天数">
                        </el-input> 天内有效期</div>
                </div>
                <div>
                    <el-button class="mt-6" type="primary" @click="submitForm(item)">保存</el-button>
                    <el-button class="mt-6" title="重置" @click="ruleForm[index] = cloneDeep[index]">重置
                    </el-button>
                </div>
            </el-form-item>
        </el-form>
    </div>
</template>
<script>
import { list, edit } from '@/api/setting/marketingTool'
import _ from 'lodash'
export default {
    name: 'marketingTool',
    data () {
        return {
            money: '',//优惠金额
            expire: '',//有效期
            ruleForm: [],//方案列表
            cloneDeep: [],//用作重置
            activeName: 'tool'
        }
    },
    created () {
        this.list()
    },
    methods: {
        // 保存
        submitForm (item) {
            if (this.isLzyh(item.title)) {
                item.extend = JSON.stringify({'money': this.money||'0'})
            }
            if (this.isMysy(item.title)) {
                item.extend = JSON.stringify({'expire': this.expire})
            }
            edit(item).then(res => {
                ElMessage.success(res.msg)
            })
        },
        // 列表方案
        list () {
            list().then(res => {
                if (res.code == 200) {
                    res.data.forEach(element => {
                        if (this.isLzyh(element.title)) {
                            this.money = JSON.parse(element.extend).money
                        }
                        if (this.isMysy(element.title)) {
                            this.expire = JSON.parse(element.extend).expire
                        }
                    });
                    this.ruleForm = res.data
                    this.cloneDeep = _.cloneDeep(res.data)
                }
            })
        },
        // 判断留资优惠
        isLzyh (text) {
            return text == '留资优惠'
        },
        // 判断买一送一
        isMysy (text) {
            return text == '买一送一'
        }
    }
}
</script>
<style lang="scss" scoped>
    ::v-deep .form {
        .el-form-item{
            border: 1px solid #ccc;
            border-radius: 8px;
            padding: 10px;
            min-width: 600px;
            margin-bottom: 40px;
        }
        .el-form-item__content {
            display: initial;
            .el-checkbox{
                vertical-align: middle;
            }
        }
    }
</style>